import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
import { Fieldset } from '@zendeskgarden/react-forms';
import { FieldsetStory } from './stories/FieldsetStory';
import { FIELDSET_FIELDS as FIELDS } from './stories/data';
import {
  hintArgs,
  hintArgTypes,
  messageArgs,
  messageArgTypes,
  fieldSubcomponents
} from './stories/common';
import README from '../README.md';

<Meta
  title="Packages/Forms/Fieldset"
  component={Fieldset}
  subcomponents={{ 'Fieldset.Legend': Fieldset.Legend, ...fieldSubcomponents }}
  args={{
    legend: 'Legend',
    fields: FIELDS,
    ...hintArgs,
    ...messageArgs
  }}
  argTypes={{
    fields: { name: 'children' },
    legend: { name: 'children', table: { category: 'Legend' } },
    ...hintArgTypes,
    ...messageArgTypes
  }}
  parameters={{
    design: {
      allowFullscreen: true,
      type: 'figma',
      url: 'https://www.figma.com/file/6g87L4FdKZTA3knt3Rsfdx/Garden?node-id=1083%3A29244'
    }
  }}
/>

# API

<ArgsTable />

# Demo

## Checkbox

<Canvas>
  <Story name="Checkbox">{args => <FieldsetStory type="checkbox" {...args} />}</Story>
</Canvas>

## Radio

<Canvas>
  <Story name="Radio">{args => <FieldsetStory type="radio" {...args} />}</Story>
</Canvas>

## Toggle

<Canvas>
  <Story name="Toggle">{args => <FieldsetStory type="toggle" {...args} />}</Story>
</Canvas>

<Markdown>{README}</Markdown>
